<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="http://www.baidu.com" onclick="return push('/test1')">push test1</a><br>
		<button onclick="push('/test2')">push test2</button><br>
		<button onclick="replace('/test3')">replace test3</button><br>
		<button onclick="back()">回退</button><br>
		<button onclick="forward()">前进</button><br>

		<script type="text/javascript" src="https://cdn.bootcss.com/history/4.7.2/history.js"></script>
		<script type="text/javascript">
			// let history = History.createBrowserHistory()//方法一，直接使用h5退出的history身上的API
			let history = History.createHashHistory()//方法二，hash值 浏览器会带有#/ 类似vue常用的hash。效果类似锚点跳转
			console.log('history:',history)
			
			function push(path){
				history.push(path)
				return false
			}
			
			function replace(path){
				history.replace(path)
			}
			
			function back(){
				history.goBack()
			}
			
			function forward(){
				history.goForward()
			}
			
			history.listen(location => {
				console.log('请求路由路径变化了:',location)
				console.log('2history:',history)
				
			})
			
		</script>

	</body>
</html>
